<template>
	<view class="tabbar">
		<view class="tabbar-item" v-for="item in items" @click.stop="go(item.url)">
			<img :src="item.icon_sel" :alt="item.title" v-if="item.isActive">
			<img :src="item.icon" :alt="item.title" v-else>
			<p :class="{
				'active' : item.isActive
			}">{{item.title}}</p>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BottomTabbar",
		props: {
			"items": Array
		},
		data() {
			return {
				nowWhere: ""
			}
		},
		created() {
			// 检查当前页面路径
			this.nowWhere = this.$mp.page.route
			this.items.forEach((x) => {
				`/${this.nowWhere}` === x.url ? x.isActive = true : x.isActive = false
			})
		},
		methods: {
			// 跳转页面
			go: function(url) {
				if (`/${this.nowWhere}` === url) {
					return
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped>
	.tabbar {
		position: fixed;
		display: flex;
		max-width: 100vw;
		min-width: 100vw;
		max-height: 4rem;
		min-height: 4rem;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		box-sizing: border-box;
		padding: .5rem;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: aliceblue;
	}

	.tabbar-item {
		display: flex;
		flex: 1;
		min-width: 0;
		gap: .25rem;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.tabbar-item p {
		font-size: .75rem
	}

	.tabbar-item>.active {
		color: brown;
	}
</style>
